<template>
  <div ref="PieChart" class="pie-chart" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'PieChart',
  data() {
    return {
      pieChart: ''
    }
  },
  mounted() {
    this.pieChart = echarts.init(this.$refs.PieChart)
    this.pieChart.setOption({
      // 设置样式
      title: {
        text: '广告营销',
        textStyle: {
          fontSize: '18px',
          fontWeight: 400,
          color: '#333'
        },
        subtext: '580',
        subtextStyle: {
          fontSize: '20px',
          fontWeight: 700,
          color: '#000'
        },
        left: 'center',
        top: 'center'
      },
      series: {
        type: 'pie',
        // 设置一个内圆半径 和外圆半径
        radius: ['40%', '70%'],
        tooltip: {
          trigger: 'item'
        },
        // 数据
        data: [
          { name: '搜索引擎', value: 1048 },
          { name: '联盟广告', value: 484 },
          { name: '直接访问', value: 735 },
          { name: '邮件营销', value: 580 },
          { name: '视频广告', value: 300 }
        ],
        // 圆的位置
        center: ['50%', '50%'],
        // 间隔
        itemStyle: {
          borderWidth: 2,
          borderColor: '#fff'
        },
        label: {
          formatter: '{b}: {c}',
          fontSize: '16px'
        }
      }
    })
    this.pieChart.on('mouseover', params => {
      const { name, value } = params.data
      this.pieChart.setOption({
        title: {
          text: name,
          subtext: value
        }
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.pie-chart {
  width: 100%;
  height: 316px;
}
</style>
